<template>
  <view class="shop-detail">
    <!-- 店铺卡片 -->
    <view class="shop-card">
      <image class="shop-logo" :src="merchantMedia.logoUrls[0].url" mode="aspectFill">
      </image>
      <view class="shop-name">{{ merchantItem.shopName || '店铺名称' }}</view>
      <view class="shop-subtitle">
        <u-tag text="纤程旗舰" type="success" plain size="mini"></u-tag>
        <text class="shop-stat">累计服务1395人</text>
      </view>
      <u-button type="primary" shape="circle" text="收藏店铺" color="#00B488"
        customStyle="margin-top:20rpx;width:60%;"></u-button>
    </view>

    <!-- 旗帜口碑 -->
    <view class="rating-card">
      <view class="rating-header">
        <text class="rating-score">4.8</text>
        <u-rate :value="4.8" active-color="#ffb400" size="22" disabled></u-rate>
        <text class="rating-desc">超过同行 95% 旗舰店</text>
      </view>
      <view class="rating-item">
        <text class="rating-label">场馆体验</text>
        <u-line-progress :percentage="86" activeColor="#f4b37d" height="10"></u-line-progress>
        <text class="rating-sub">4.8 高于同行 86%</text>
      </view>
      <view class="rating-item">
        <text class="rating-label">服务人员</text>
        <u-line-progress :percentage="98" activeColor="#f4b37d" height="10"></u-line-progress>
        <text class="rating-sub">4.9 高于同行 98%</text>
      </view>
    </view>

    <!-- 商家资质 -->
    <view class="info-card">
      <view class="info-row">
        <text class="info-left">商家资质</text>
        <view class="info-right" @click="gotoQuali">
          <text>查看资质</text>
          <u-icon name="arrow-right" size="26" color="#999"></u-icon>
        </view>
      </view>
      <view class="info-row">
        <text class="info-left">店铺经营时长</text>
        <text class="info-right-text">已持续经营128天</text>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <u-button text="进店发现更多服务" color="#00B488" shape="circle" type="primary"></u-button>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request.js';
export default {
  name: "ShopDetail",
  data() {
    return {
      merchantInfo: {},
      merchantMedia: {
        logoUrls: [],
      },
      merchantItem: {},
      productId: '',
    }
  },
  async onLoad(options) {
    if (options.productId) {
      this.productId = options.productId;
      await this.getMerchantInfo();
    } else {
      await this.getMerchantInfoByStorage();
    }

    await this.fetchMerchantItem();
    await this.getMerchantMedia();
  },
  methods: {
    async getMerchantInfo() {
      try {
        const res = await request({
          url: `/merchant/getMerchant?spuId=${this.productId}`,
          method: 'GET',
          loading: true
        });
        this.merchantInfo = res?.data || {};
        console.log('商户信息', this.merchantInfo);
      } catch (e) {
        console.error('获取商户信息失败', e);
        this.merchantInfo = this.merchantInfo || {};
      }
    },
    async getMerchantInfoByStorage() {
      this.merchantInfo = uni.getStorageSync('companyInfo') || {};
    },
    async fetchMerchantItem() {
      try {
        if (!this.merchantInfo || !this.merchantInfo.id) return;
        const res = await request({
          url: `/merchant-item/getByMerchantId?merchantId=${this.merchantInfo.id}`,
          method: 'GET',
          loading: true
        });
        console.log('商家详细信息', res.data)
        if (res.code === 200) {
          this.merchantItem = res.data || {};
          // 更新页面显示的商家信息
          this.merchantItem.businessType = this.getbusinessType();
        }
      } catch (err) {
        console.error('获取商家详细信息失败', err);
      }
    },
    async getMerchantMedia() {
      try {
        if (!this.merchantInfo || !this.merchantInfo.id) return;
        const res = await request({
          url: `/merchantMedia/${this.merchantInfo.id}`,
          method: 'GET',
          loading: true
        });
        this.merchantMedia = res?.data || {};
        console.log('商户媒体信息', this.merchantMedia);
        const logos = this.merchantMedia?.logoUrls || [];
        this.logo = (logos[0] && logos[0].url) || (logos[1] && logos[1].url) || '';
        console.log('商户logo', this.logo);
      } catch (e) {
        console.error('获取商户媒体信息失败', e);
      }
    },
    goBack() {
      uni.navigateBack();
    },
    gotoQuali() {
      uni.navigateTo({
        url: `/public/merchant/shopDetail/shopQualification?merchantId=${this.merchantInfo.id}`
      });
    }
  },
};
</script>
<style scoped>
.shop-detail {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 150rpx;
}

/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.nav-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

/* 店铺卡片 */
.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.shop-logo {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.shop-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.shop-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #666;
}

.shop-stat {
  margin-left: 16rpx;
}

/* 评分卡片 */
.rating-card {
  margin: 20rpx 30rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.rating-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.rating-score {
  font-size: 48rpx;
  color: #f4b37d;
  font-weight: bold;
  margin-right: 16rpx;
}

.rating-desc {
  margin-left: auto;
  font-size: 26rpx;
  color: #888;
}

.rating-item {
  margin-top: 20rpx;
}

.rating-label {
  display: block;
  font-size: 28rpx;
  color: #444;
  margin-bottom: 10rpx;
}

.rating-sub {
  font-size: 26rpx;
  color: #999;
  margin-top: 6rpx;
}

/* 商家信息卡 */
.info-card {
  margin: 20rpx 30rpx;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-row:last-child {
  border-bottom: none;
}

.info-left {
  font-size: 28rpx;
  color: #333;
}

.info-right {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #00B488;
}

.info-right-text {
  font-size: 26rpx;
  color: #999;
}

/* 底部按钮 */
.bottom-btn {
  position: fixed;
  bottom: 40rpx;
  width: 600rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
</style>
